<template>
	<u-navbar backIconColor="#fff" title="代理商" title-color="#fff" :is-back="true" :background="{}" class="bg"
		:borderBottom="false"></u-navbar>
	<image style="height: 440rpx;width: 100%;" :src="inits.banner.first_image"></image>
	<view>
		<view v-for="item in inits.list" :key="item.id" style="margin: 56rpx 0 30rpx 0;"
			@click="jump(item.path)">
			<view class="flex flex-ai-c flex-jc-sb grid" v-if="item.id != 5">
				<view>{{item.title}}</view>
				<view>
					<i-icon type="b" :icon="item.icon" :size="item.size" />
				</view>
			</view>
			<button open-type="contact" class="flex flex-ai-c flex-jc-sb grid" v-else>
				<view>{{item.title}}</view>
				<view>
					<i-icon type="b" :icon="item.icon" :size="item.size" />
				</view>
			</button>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import common from '@/api/common.js';
	const inits = reactive({
		list: [
			{
				title: '钱包',
				id: 0,
				path: '/pages/me/wallet',
				icon: 'icon-right',
				size: '31rpx',
			},
			{
				title: '分销商',
				id: 1,
				path: '/pages/me/distributor',
				icon: 'icon-right',
				size: '31rpx',
			},
		],
		banner: []
	})
	const jump = (url) => {
		uni.navigateTo({
			url
		})
	}
	const getBanner = async () => {
		const res = await common.getBanner({ flag: 5 })
		if (res.code !== 200 || !res.data.length) return
		inits.banner = res.data[0]
	}
	onLoad(() => {
		getBanner()
	})
</script>

<style lang="scss" scoped>
	.bg {
		width: 100%;
		height: 44rpx;
		position: absolute;
	}
	.grid {
		margin: 0 30rpx;
		height: 133rpx;
		background: #F7F7F7;
		padding: 0 60rpx 0 20rpx;
	}
</style>